{% extends 'base.html' %}

{% block title %}
    登录首页
{% endblock %}

{% block css %}

    <style>
        p{
            color:red
        }
    </style>
{% endblock %}

{% block content %}
<form class="layui-form layui-form-pane" action="">
    {% csrf_token %}
    <div class="layui-form-item" pane>
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
          <input type="radio" name="category" value="1" title="投诉" checked>
          <input type="radio" name="category" value="2" title="咨询">
          <input type="radio" name="category" value="3" title="建议">
          <input type="radio" name="category" value="4" title="感谢">
        </div>
      </div>

    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">通信地址</label>
        <div class="layui-input-block">
          <input type="text" name="address" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
          <input type="text" name="phone" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
          <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">是否公开</label>
        <div class="layui-input-inline">
          <select name="interest" lay-filter="aihao">
            <option value=""></option>
            <option value="1">是</option>
            <option value="0" selected>否</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">邮件</label>
        <div class="layui-input-block">
          <input type="text" name="email" class="layui-input" lay-verify="email">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">邮编</label>
        <div class="layui-input-block">
          <input type="text" name="post_code" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">qq号码</label>
        <div class="layui-input-block">
          <input type="text" name="qq" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>
    
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">投诉内容</label>
      <div class="layui-input-block">
        <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
      </div>
    </div>

    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose">选择文件</button>
        <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
      </div>

    <div class="layui-form-item">
      <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </form>
{% endblock %}

{% block js %}

<script>
    var form;
    var file;
layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo2)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });

  var upload = layui.upload;
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-choose',
    url: '', // 此处配置你自己的上传接口即可
    auto: false,
    // multiple: true,
    bindAction: '#ID-upload-demo-action',
    done: function(res){
      layer.msg('上传成功');
      console.log(res)
    }
  });
});
</script>
{% endblock %}
